export const GlrGisJS = {
  methods: {
    pillarChart(ele, dateTime, dataValue) {
      var myChart = this.$echarts.init(document.getElementById(ele));
      var option = {
        tooltip: {
          trigger: "axis"
        },
        /*
        legend: {
          data: ["用电量(kwh)"],
          textStyle: {
            color: "rgb(155, 152, 152)",
          }
        },*/
        toolbox: {
          show: false,
          feature: {
            dataView: {
              readOnly: true
            },
            magicType: {
              type: ["line", "bar"],
              show: false
            }
          }
        },
        grid: {
          top: "10%",
          left: "8%",
          right: "8%",
          bottom: "2%",
          backgroundColor: '#fff',
          width: "90%", //图例宽度
          height: "80%", //图例高度
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            data: dateTime,

            axisLine: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            axisLabel: {
              textStyle: {
                fontStyle: "italic",
                color: "rgb(32, 106, 123)"
              }
            }


          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgb(32, 106, 123)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(32, 106, 123)",
                fontStyle: "italic"
              }
            }

          }
        ],
        series: [
          {
            name: "用电量(kwh)",
            type: "bar",
            data: dataValue,
            tooltip: {
              borderWidth: 1
            }
          }
        ],
        color: ["rgb(26, 224, 254)", "rgb(36, 134, 191)"]

      };
      myChart.setOption(option);

    },
//折线图---新
    lineChartN(ele, dateTime, dataValue) {
      var chart = this.$echarts.init(document.getElementById(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          top: "10%",
          left: "8%",
          right: "8%",
          bottom: "2%",
          backgroundColor: '#fff',
          width: "90%", //图例宽度
          height: "80%", //图例高度
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },

            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: dateTime,
            axisLine: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(32, 106, 123)",
                fontStyle: "italic"
              }
            },
            axisTick: {
              show: true

            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            }

          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(Kwh)",
            nameLocation: "end",
            nameTextStyle: {
              color: "rgb(32, 106, 123)"
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(32, 106, 123)",
                fontStyle: "italic"
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "rgb(32, 106, 123)"
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgb(32, 106, 123)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均功率(w)",
            data: dataValue
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option)
    },
    /*散点图*/
    /*ringChart*/
    ringChart(ele,data) {
      var myChart = this.$echarts.init(document.getElementById(ele));
      var plantCap = [{
        name: 'PM2.5',
        value: data.pm25+'(ug/m3)'
      }, {
        name: 'PM10',
        value: data.pm10+"(ug/m3)"
      }, {
        name: '湿度',
        value: data.humidity+'(RH)'
      }, {
        name: '温度',
        value: data.temperature+'(RH)'
      }, {
        name: '噪声',
        value: data.noise+'(分贝)'
      }];

      var datalist = [{
        /*PM2.5*/
        offset: [56, 60],
        symbolSize: 105,
        opacity: .95,
        color: 'rgba(120,130,50, 0.5)'
      }, {
        /*PM10*/
        offset: [15, 50],
        symbolSize: 100,
        opacity: .84,
        color: 'rgba(4,186,25, 0.95)'
      }, {
        /*湿度*/
        offset: [80, 35],
        symbolSize: 113,
        opacity: .8,
        color: 'rgba(60,130,230, 0.95)'
      }, {
        /*温度*/
        offset: [36, 30],
        symbolSize: 95,
        opacity: .75,
        color: 'rgba(250,180,30, 0.90)'
      }, {
        /*气压*/
        offset: [57, 20],
        symbolSize: 70,
        opacity: .7,
        color: 'rgba(100,200,230, 0.90)'
      }];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
          name: item.value + '\n' + item.name,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          },
        })
      }

      var option = {
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [{
          gridIndex: 0,
          type: 'value',
          show: false,
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameGap: 5
        }],
        yAxis: [{
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: 'middle',
          nameGap: 30
        }],
        series: [{
          type: 'scatter',
          symbol: 'circle',
          symbolSize: 120,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#65c6e7',
              textStyle: {
                fontSize: '20'
              }
            },
          },
          itemStyle: {
            normal: {
              borderWidth: '0',
              borderType: 'solid',
              borderColor: '#fff',
              color: '#68b837',
              shadowColor: '#68b837',
              shadowBlur: 10
            }
          },
          data: datas
        }]
      };

      myChart.setOption(option);
    }
  }
}
